<template>
	<view class="pagebox flex-column-center">
		<button class="headbox flex-column-center mb30" open-type="chooseAvatar" @chooseavatar="chooseavatar">
			<view class="head"><image v-if="obj.u.head" :src="`${obj.lu.head!==obj.u.head?proxy.$c.serverHost:proxy.$c.fileHost}${obj.lu.head!==obj.u.head?'upload':'head'}/${obj.u.head}`" mode="aspectFill"></image></view>
			<view class="headtitle mt5">修改头像</view>
		</button>
		<input type="nickname" class="weui-input" placeholder="请输入昵称" :value="obj.u.nickname" @input="bindinput" @blur="bindblur" />
		<view class="flex1"></view>
		<button v-if="obj.lu.nickname!==obj.u.nickname||obj.lu.head!==obj.u.head" class="button base-bg w-color" open-type="getUserInfo" :disabled="obj.disabled" @click="confirm">确认修改</button>
	</view>
</template>

<script setup>
    import { reactive, getCurrentInstance,onMounted,watch } from 'vue'
	import { onLoad,onShow,onUnload,onReady,onTabItemTap,onReachBottom,onPullDownRefresh,onPageScroll } from '@dcloudio/uni-app';

    let { proxy } = getCurrentInstance()
	let obj = reactive({
		lu: {},
		u: {},
		showbtn: false,
		disabled: false,
	})
	
	onMounted(()=>{
		init()
	})
	
	const init=()=>{
		getuser()
	}
	
	const getuser=()=>{
		proxy.$reQuest.post('mp/user/get',{},{token: true,noOut:true},).then(d=>{
			if(d.success&&d.msg){
				const u = {
					head: d.msg.head,
					nickname: d.msg.nickname
				}
				obj.u = u
				obj.lu = JSON.parse(JSON.stringify(u))
			}
		}).catch(err=>{})
	}
	
	const chooseavatar=(e)=>{
		if(e.detail.avatarUrl){
			uni.uploadFile({
				url: proxy.$c.uploadHost,
				filePath: e.detail.avatarUrl,
				header: {
					'token': proxy.$c.getToken()
				},
				name: 'file',
				formData: {
					'maxwidth': 1000,
					'maxheight': 1000,
				},
				success: res1 => {
					console.log(res1);
					let data = JSON.parse(res1.data)
					if(data.success){
						obj.u.head = data.filename
					}else{
						proxy.$c.Toast('上传失败！');
					}
				},
				fail: err => {
					uni.showToast({
						title: JSON.stringify(err),
						icon: 'none'
					})
				}
			});
		}
	}
	
	const bindblur=(e)=>{
		obj.u.nickname = e.detail.value; // 获取微信昵称
	}
	
	const bindinput=(e)=>{
		obj.u.nickname = e.detail.value; // 获取微信昵称
	}
	
	const confirm=()=>{
		console.log('obj.u',obj.u);
		if(!obj.u.nickname){
			proxy.$c.Toast('请输入昵称！')
			return
		}
		if(!obj.u.head){
			proxy.$c.Toast('请上传头像！')
			return
		}
		obj.disabled = true
		proxy.$reQuest.post('mp/update',{
			...obj.u,
			openid: uni.getStorageSync('openid')
		},{token: true},).then(res=>{
			obj.disabled = false
			if(res.success){
				proxy.$c.Toast('更新成功！')
				obj.lu = JSON.parse(JSON.stringify(obj.u))
			}else{
				proxy.$c.Toast(res.err||'更新失败！')
			}
		}).catch(err=>{
			obj.disabled = false
			proxy.$c.Toast(err||'更新失败！')
		})
	}
</script>

<style lang="scss" scoped>
.pagebox{
	width: 100vw;height: 100vh;
	padding: 60rpx 30rpx;box-sizing: border-box;
	.headbox{
		background-color: rgba(0,0,0,0);
		.head{width: 100rpx;height: 100rpx;border-radius: 100rpx;overflow: hidden;background-color: #f0f0f0;}
		image{width: 100rpx;height: 100rpx;border-radius: 100rpx;}
		.headtitle{font-size: 26rpx;}
	}
	.weui-input{
		width: 60; height: 80rpx; padding: 0 20rpx;box-sizing: border-box;border-radius: 20rpx;
		background-color: #f0f0f0;
	}
	.button{
		width: 60%; height: 100rpx;border-radius: 100rpx;text-align: center;line-height: 100rpx;font-size: 32rpx;
		margin-top: 60rpx;
	}
}
</style>
